<template>
    <!-- 所有内容的容器 -->
    <view class="container" v-if="dataList">
        <view class="headZh">
            <view class="banner">
                <image mode="widthFix" :src="iconUrl+'app-banner.png'"></image>
            </view>
            <view class="search">
                <u-search @search="search" v-model="searchVal" placeholder="请输入搜索内容" bg-color="white"
                          height="60"
                          :clearabled="true" shape="round"
                          :show-action="false"></u-search>
            </view>
        </view>
        <view class="blank">
            <div></div>
        </view>
        <view class="no-data" v-if="dataList.length===0">
            <view>
                <image :src="iconUrl+'暂无数据.png'"></image>
            </view>
            <view>
                <text>暂无数据, 快去发布任务吧~</text>
                <view class="blank"></view>
            </view>
        </view>

        <view v-if="dataList.length> 0" class="content" @click="detail(item.id)" v-for="item in dataList"
              :key="item.id">
            <view class="blueBar"></view>
            <view class="info">
                <view class="top">
                    <view class="title">
                        <div>{{item.projectName}}</div>
                    </view>
                    <view class="price">
                        <text>{{item.positionSalary}}</text>
                        <text style="font-size:24rpx;color:black">/{{item.salaryUnit}}</text>
                    </view>
                </view>
                <view class="tag">
                    <u-tag :text="item.sex" v-if="item.sex !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="item.age" v-if="item.age !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="item.education" v-if="item.education !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5" mode="light" size="mini"/>
                </view>
                <view class="company">
                    <view style="margin-top:7rpx;">
                        <image mode="heightFix" :src="iconUrl+'工具箱.png'"></image>
                    </view>
                    <view>
                        <text style="font-size:26rpx;">{{item.corpName}}</text>
                    </view>
                    <view class="bm-btn">
                        <div> 报名: {{item.signNum}}人</div>
                    </view>
                </view>
            </view>
        </view>
        <u-divider v-if="dataList.length>0" bg-color="#F1F1F1" fontSize="20" border-color="#D1CECE" color="#D1CECE">
            您触及到我的底线了~
        </u-divider>
        <view class="bottom"></view>

        <u-tabbar v-model="current" :list="tarBarList" :mid-button="merType === '2'"></u-tabbar>
    </view>
</template>

<script>
    import tabBar from '@/static/js/tabBar.js';
    import uniLoadMore from '@/wxcomponents/uni-app/uni-load-more/uni-load-more';
    export default {
        components:{
            uniLoadMore
        } ,
        data() {
            return {
                iconUrl: this.iconUrl,
                sexOptions: [],
                educationOptions: [],
                searchVal: '',
                dataList: [],
                tarBarList: [],
                current: 0,
                merType: '2',
                status: "",
                pageNumber: 1,
                pageSize: 3,
                isEnd: false
            }
        },
        onLoad() {
            this.$getDictList('sex', {
                success: (cts) => {
                    this.sexOptions = cts.data;
                }
            });
            this.$getDictList('education', {
                success: (cts) => {
                    this.educationOptions = cts.data;
                }
            });
            this.tarBarList = tabBar.getBarList(this.merType, this.iconUrl);
            this.getMerId();
        },
        onShow() {
            this.restPage();
            this.getList(false);
        },
        //上拉分页展示
        onReachBottom(){
            this.pageNumber = this.pageNumber + 1;
            if(this.isEnd){
                return;
            }
            this.getList(true);
        },
        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
        onPullDownRefresh() {
            this.restPage();
            setTimeout(function () {uni.stopPullDownRefresh();}, 500);
            this.getList(false);
        },
        methods: {
            search(){
                this.restPage();
                this.getList(false);
            },
            restPage(){
                this.pageNumber = 1;
                this.status = '';
                this.isEnd = false;
            },
            getMerId() {
                this.$sendRequest({
                    url: '/api/wx/getMerchantInfo',
                    method: 'POST',
                    success: (cts) => {
                        uni.setStorage({
                            key: 'mer_id',
                            data: cts.data.merId
                        });
                    }
                });
            },
            getList(pageFlag) {
                this.$sendRequest({
                    url: '/api/wx/getProjectList',
                    method: 'POST',
                    data: {
                        projectName: this.searchVal,
                        merId: uni.getStorageSync('mer_id'),
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize
                    },
                    success: (cts) => {
                        let dataRecord = cts.data.records;
                        dataRecord.forEach(item => {
                            item.sex = this.$selectDictLabel(this.sexOptions, item.sex)
                            item.education = this.$selectDictLabel(this.educationOptions, item.education)
                        });
                        if(pageFlag){
                            this.dataList = this.dataList.concat(dataRecord);
                        }else{
                            this.dataList = dataRecord;
                        }
                        if(dataRecord.length < this.pageSize){
                            this.isEnd=true;
                            this.status="noMore";
                        }
                    }
                });
            },
            detail(id) {
                uni.navigateTo({
                    url: 'detail?id=' + id
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .headZh {
        position: relative;
    }

    .banner image {
        width: 750rpx;
        height: 350rpx;

    }

    .search {
        width: 655rpx;
        margin-left: 50rpx;
        position: absolute;
        top: 320rpx;
    }

    .searchInputClass {
        font-size: 24rpx;
        font-weight: 500;
        color: #9F9F9F;
        width: 600rpx;
    }

    .blank div {
        display: block;
        height: 60rpx;
    }

    .bottom {
        display: block;
        height: 10rpx;
        margin-bottom: 10rpx;
    }

    .content {
        display: flex;
        margin-left: 36rpx;
        margin-bottom: 30rpx;

    }

    .content .blueBar {
        display: flex;
        flex-direction: column;
        margin-top: 28rpx;
        width: 15rpx;
        height: 160rpx;
        border-radius: 20rpx;
        background-color: #1885FF;

    }

    .content .info {
        display: flex;
        flex-direction: column;
        margin-left: -6rpx;
        margin-right: 30rpx;
        display: flex;
        width: 700rpx;
        height: 220rpx;
        border-radius: 20rpx;
        background-color: #FFFFFF;
        padding: 20rpx;
    }

    .content .top {
        margin: 12rpx 0px;
        display: flex;
        font-size: 36rpx;
        justify-content: space-between;
    }

    .content .top .title text {
        font-size: 36rpx;
    }

    .content .top .price {
        font-size: 40rpx;
        color: #258CFF;
    }

    .content .top .price text {
        font-size: 40rpx;
    }

    .content .info .tag {
        display: flex;
        flex-wrap: wrap;
    }

    .content .info u-tag {
        margin-right: 10rpx;
        flex-direction: row;
    }

    .content .info .company {
        display: flex;
        margin-top: 20rpx;
        text{
            display: block;
            width: 420rpx;
        }
    }

    .content .info image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
    }
    .no-data {
        text-align: center;
        image {
            width: 500rpx;
            height: 500rpx;
        }
        text {
            display: block;
            font-size: 24rpx;
            width: 300rpx;
        }
    }
    .bm-btn{
        display: flex;
        div {
            border-radius: 6rpx;
            font-size: 24rpx;
            background-color: #ECF5FF;
            /*border: 2rpx solid #1885FF;*/
            padding: 4rpx 6rpx;
            text{
                display: block;
                color:green;
            }
        }
    }

</style>
